import React, {Component} from 'react';
import {Grid,Dialog, Button,Step,Input,Icon,Feedback} from '@icedesign/base';
import {
  FormBinderWrapper as IceFormBinderWrapper,
  FormBinder as IceFormBinder,
  FormError as IceFormError,
} from '@icedesign/form-binder';
import SysDynamicIcon from '../../../../../../components/SysDynamicIcon/SysDynamicIcon';
import API from '../../../../../../tools/API';

const {Row, Col} = Grid;

/**
*  绑定手机号
*/
export default class BaseBindPhone extends Component{
  constructor(props) {
     super(props);
     this.state = {
       visible : false,
       newnumber:0,
       user:{}
     };
     this.sendNewMessage = this.sendNewMessage.bind(this);
  }


  //打开弹出层
  onOpen = () => {
    this.setState({
      newnumber:0,
      visible: true
    });
  };
  //关闭弹出层
  onClose = () => {
    this.setState({
      visible: false
    });
    this.props.reload();
  };

  sendNewMessage(){
    // 发送验证码
    if (this.state.newnumber > 0) {
       Feedback.toast.error("请稍后重试");
    }else if (this.state.user.newPhone == undefined) {
       Feedback.toast.error("请输入手机号");
    }else {
      API.sendPhoneAuthCode({phone:this.state.user.newPhone}).then((res) => {
        this.setState({newnumber:60});
        let siv = setInterval(()=>{
          let number = this.state.newnumber
          if (number == 0) {
            clearInterval(siv);
          }else {
            this.setState({newnumber:number-1});
          }
        },1000)
      });
    }
  }

  //设置新手机号
    submitNewModifyPhone = () => {
     this.refs.form.validateAll((errors, values) => {
       if(errors == null){
         //验证
         let res = API.modifyPhone({
             phone:this.state.user.newPhone,
             authCode:this.state.user.newAuthCode
         });
         //
         if (res.code == "000") {
           Feedback.toast.success("手机绑定成功");
         }else {
           Feedback.toast.error(res.msg);
         }
         this.onClose();
       }
     });
   };

  render(){
    return(
      <div>
          <a href="javaScript:;" onClick={this.onOpen}>绑定</a>
          <Dialog
            visible={this.state.visible}
            footer={false}
            onClose={this.onClose}
            title="绑定手机号"
            className="add-user-dialog"
            style={{
              textAlign:'center',
            }}
            >
              <IceFormBinderWrapper ref="form" value={this.state}>
                <div>
                  <div style={{margin:'10px'}}>
                    <span>手机号：</span>
                    <IceFormBinder rules={[
                      {
                        type: 'string',
                        required: true,
                        message: '必填',
                      },
                      {
                        pattern: /^1[34578]\d{9}$/,
                        required: true,
                        message: '请输入正确手机号',
                      }
                    ]} name="user.newPhone" >
                        <Input style={{
                          width:198
                        }}/>
                  </IceFormBinder>
                  </div>
                  <div><IceFormError name="user.newPhone" /></div>

                <div style={{margin:'10px',paddingRight:100}}  className="send-phone">
                    <span>验证码：</span>
                  <IceFormBinder rules={[
                    {
                      type: 'required',
                      required: true,
                      message: '必填',
                    },
                    {
                      len:4,
                      required: true,
                      message: '长度为4位',
                    }
                    ]} name="user.newAuthCode" >
                    <Input style={{
                      width:100
                    }} addonAfter={
                        <div>
                           {
                             this.state.newnumber > 0 ?
                              <div style={{color: '#ffffff'}}>
                                {this.state.newnumber} 秒
                              </div>
                            :
                              <div onClick={this.sendNewMessage}>
                               <SysDynamicIcon className="icon" style={{
                                   float: 'left',
                                   color: '#ffffff',
                                   cursor: 'pointer'
                                 }} type="paper" />
                              </div>
                           }
                        </div>
                      }/>
                  </IceFormBinder>
                  </div>
                  <div><IceFormError name="user.newAuthCode" /></div>
                  <div style={{
                    fontSize: 12,
                    color: '#999'
                    }}>测试环境万能验证码：1234</div>
                  <Button  onClick={this.submitNewModifyPhone}  style={{
                      marginTop:20
                    }} type="primary" > 完成 </Button>
                </div>
              </IceFormBinderWrapper>
          </Dialog>
      </div>
    )
  }

}
